<template>
	<view class="page">
		<uni-nav-bar left-icon="left" @clickLeft="back" backgroundColor="#3183FB" style="width: 100%;" :border="false"
			color="#fff" title="卡券管理"></uni-nav-bar>
		<view class="background"></view>
		<navigator url="/packgeCoupons/distributeCoupons/distributeCoupons" class="top">
			<image src="/static/加号@2x.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
			<view style="color: #2275F1;margin-left: 20rpx;">
				新增优惠券
			</view>
		</navigator>
		<view class="outView">
			<view class="button-container">
				<view class="button-item" style="border-top-left-radius: 40rpx;border-bottom-left-radius: 40rpx;"
					:class="{active: status === '进行中'}" @click="changeStatus('进行中')">
					<text>进行中</text>
				</view>
				<view class="button-item" style="border-top-right-radius: 40rpx;border-bottom-right-radius: 40rpx;"
					:class="{active: status === '已结束'}" @click="changeStatus('已结束')">
					<text>已结束</text>
				</view>
			</view>
			<view class="list" v-for="(coupon, index) in coupons" :key="coupon.id"
				:class="{ 'ended-coupon': coupon.isEnded }">
				<view class="left">
					<view style="font-size: 24rpx;">{{coupon.condition}}</view>
					<view style="margin-top: 10rpx;">
						<span style="font-size: 26rpx;">￥</span>
						<span style="font-size: 60rpx;">{{coupon.amount}}</span>
					</view>
				</view>
				<view class="right">
					<view>优惠券名称:{{coupon.name}}</view>
					<view>有效期:{{coupon.valid}}</view>
					<view>每人限领一张</view>
				</view>
				<view v-if="coupon.isEnded">
					<image class="ended-label" src="/static/1a7cdef7e44d372cd260a0483630ee26b37931b52ad2-qFaTDV@2x.png"
						mode=""></image>
				</view>

			</view>
			<view class="list" v-for="(coupon, index) in coupons" :key="coupon.id"
				:class="{ 'ended-coupon': coupon.isEnded }">
				<view class="left">
					<view style="font-size: 24rpx;">{{coupon.condition}}</view>
					<view style="margin-top: 10rpx;">
						<span style="font-size: 26rpx;">￥</span>
						<span style="font-size: 60rpx;">{{coupon.amount}}</span>
					</view>
				</view>
				<view class="right">
					<view>优惠券名称:{{coupon.name}}</view>
					<view>有效期:{{coupon.valid}}</view>
					<view>每人限领一张</view>
				</view>
				<view v-if="coupon.isEnded">
					<image class="ended-label" src="/static/1a7cdef7e44d372cd260a0483630ee26b37931b52ad2-qFaTDV@2x.png"
						mode=""></image>
				</view>
			</view>
			<view class="list" v-for="(coupon, index) in coupons" :key="coupon.id"
				:class="{ 'ended-coupon': coupon.isEnded }">
				<view class="left">
					<view style="font-size: 24rpx;">{{coupon.condition}}</view>
					<view style="margin-top: 10rpx;">
						<span style="font-size: 26rpx;">￥</span>
						<span style="font-size: 60rpx;">{{coupon.amount}}</span>
					</view>
				</view>
				<view class="right">
					<view>优惠券名称:{{coupon.name}}</view>
					<view>有效期:{{coupon.valid}}</view>
					<view>每人限领一张</view>
				</view>
				<view v-if="coupon.isEnded">
					<image class="ended-label" src="/static/1a7cdef7e44d372cd260a0483630ee26b37931b52ad2-qFaTDV@2x.png"
						mode=""></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: '进行中', // 初始状态为进行中
				coupons: [{
						id: 1,
						name: '新用户专享体验券',
						valid: '2020.3.18 - 2023.4.18',
						limit: '每人限领一张',
						amount: 20,
						condition: '满200元可用',
						isEnded: false // 新增标识，默认未结束
					},
					// 其他优惠券数据...
				]
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			changeStatus(newStatus) {
				this.status = newStatus;
				if (newStatus === '已结束') {
					this.coupons.forEach(coupon => {
						coupon.isEnded = true;
					});
				} else if (newStatus === '进行中') {
					this.coupons.forEach(coupon => {
						coupon.isEnded = false;
					});
				}
				console.log('当前状态：', this.status);
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.background {
		position: relative;
		background-color: #3183FB;
		width: 100%;
		height: 300rpx;
	}

	.top {
		top: -280rpx;
		display: flex;
		position: relative;
		width: 640rpx;
		background-color: #F7F7F7;
		height: 80rpx;
		border-radius: 80rpx;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
	}

	.outView {
		top: -200rpx;
		padding: 0;
		position: relative;
		background-color: white;
		border-radius: 20rpx;
		width: 680rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.button-container {
		display: flex;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.button-item {
		padding: 8px 16px;
		border: 1px solid #ccc;
		height: 40rpx;
		cursor: pointer;
		background-color: #fff;
		transition: background-color 0.3s ease;
	}

	.button-item.active {
		background-color: #007AFF;
		color: #fff;
	}

	.list {

		width: 600rpx;
		height: 180rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 26rpx;
	}

	.left {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		width: 200rpx;
		height: 100%;
		background-color: #FF7023;
		padding: 0;
		margin: 0;
		border: none;
	}

	.left view {
		font-size: 30rpx;
		color: white;
	}

	.left span {
		font-size: 40rpx;
		color: white;
	}

	.right {
		flex: 1;
		padding: 10rpx;
		background-color: #FFF3EB;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}

	.right view {
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.right>view:nth-child(1) {
		font-size: 26rpx;
	}

	.right>view:nth-child(2) {
		font-size: 18rpx;
	}

	.right>view:nth-child(3) {

		font-size: 26rpx;
	}

	.ended-coupon {
		filter: grayscale(100%);
		/* 使优惠券变灰 */
	}

	.ended-label {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
		font-size: 24rpx;
		color: #999;
	}
</style>